<template>
  <div id="app">
    <div class="header">
       <v-header></v-header>
    </div>
    <div class="nav">
      <!--路由匹配2.0 a标签写法-->
      <router-link class='nav-son' to="/goods">商品</router-link>
      <router-link class='nav-son' to="/ratings">评论</router-link>
      <router-link class='nav-son' to="/shops">商家</router-link>
    </div>
    <div class="content">
      <!--路由占位-->
      <router-view></router-view>
    </div>
   
  </div>
</template>
<script>
  import header from './components/header.vue'
 

  export default {
    // name: 'app'
    components:{
      vHeader:header,
     
     
    
    }
  }

</script>
<style>
.header{
  position: relative;
  z-index: 100;

}
.nav{
  position: relative;
  z-index: 101;
  display: flex;
  text-align:center;
  border-bottom:1px solid rgba(96,96,96,.3);
 
  

}
.nav-son{
  flex:1;
  font-size: 14px;
  color:#4d555d;
  height:40px;
  line-height: 40px;
}
.nav-son:hover{
  color:red;
}
</style>
